<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
           width:50px;
           height:50px;
           background-color: red;
           position: absolute;
           left:0px;
           top:0px;
        }
       </style>
</head>
<body>
    <h1> 定时器 </h1> 
    setTimeout() 参数2  多少秒后执行一次
    setInterval()     每3秒执行一次，无限循环
    
    clearInterval(key)  停止
    <div class="box" onclick="tingzhi()"></div>

    <script>
    //  setTimeout(function(){
    //     console.log('定时 timeout ');
    //  },3000);
    
    let bx=0,by =0;
    let box = document.querySelector('.box');
    let key = setInterval(function(){
        bx += 1;
        box.style.left = bx + 'px';
    },1000/24);

    function tingzhi(){
       console.log("时间停止");
       clearInterval( key ); 
    }
    </script>

</body>
</html>